<template>
  <div class="login-page">
    
    <el-card class="el-card">
  <div class="top"></div>
  <template #header>
 <img
 src="http://likede2-admin.itheima.net/img/logo.595745bd.png"
 alt=""
 /></template>

 <el-form  :model="form" :rules="rules" ref='ttt'>

   
   <el-form-item  prop="loginName">
    <el-input  placeholder="请输入用户名" v-model="form.loginName" prefix-icon='iconfont icon-shouji'></el-input>
  </el-form-item>


<el-form-item  prop="password">
    <el-input placeholder="请输入密码 " v-model="form.password" type="password" prefix-icon='iconfont icon-jiesuo'></el-input>
  </el-form-item>

  
 <div class="zuihou">
<el-form-item  prop="code">
    <el-input placeholder="请输入验证码 " v-model="form.code" type="text" prefix-icon='iconfont icon-yanzhengyanzhengma' class="zu"></el-input>
    <div class="yan" @click="yanzhengmaFn">
        <img :src= imgCode alt="">
    </div>
  </el-form-item>
  </div>
 
  <el-form-item class="tc">
     <el-button type="primary" @click="login">登录</el-button>
  </el-form-item>

</el-form>
</el-card>
  </div>
</template>

<script>
import {setclientToken,getclientToken,setToken} from '@/utils/storage'
import {code,userLogin} from '@/api/user'
export default {
  name: 'LoginIndex',
 async created(){
  //获取随机数
 const num = Math.floor(Math.random()*101)
      //  console.log(num);
       const res = await code(num)
      //  console.log(res);
      //转化为base64格式
        this.imgCode = 'data:image/png;base64,' +
        btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), '' ))
        // console.log(this.imgCode);
  },
  data () {
    return {
      imgCode:'',
      form: {
        loginName: 'admin',
        password: 'admin',
        code:'',
        clientToken:'',
        loginType:0
      },
      rules: {
      loginName: [
          { required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
          { min: 5, max: 11, message: '用户名必须是5-11位哦', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          { pattern: /^\w{5,11}$/, message: '密码必须是5-11位哦', trigger: ['blur', 'change'] }
        ],
          code: [
          { required: true, message: '请输入验证码', trigger: ['blur', 'change'] },
          { pattern: /^\w{4,4}$/, message: '验证码为4位哦', trigger: ['blur', 'change'] }
        ]
      }

    }
  },
  methods: {
    async login () {
      // console.log(this.form);
      console.log(getclientToken());
      this.form.clientToken = getclientToken()
      console.log(this.form.clientToken);
       this.$refs.ttt.validate(async (a)=>{
        if(a){
          console.log(1);
          const res = await userLogin(this.form)
          console.log(this.form);
          console.log(res);
           this.$store.dispatch('son/setToken',res)
        
        }

       })
    },
    reset () {
      // 对整个表单进行重置,将所有字段重置为初始值并移除校验结果
      this.$refs.ttt.resetFields()
    },
  async yanzhengmaFn(){
       const num = Math.floor(Math.random()*101)
      //  console.log(num);
       const res = await code(num)
       setclientToken(num)
       console.log(res);
     this.imgCode = 'data:image/png;base64,' +
        btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), '' ))
        // console.log(this.imgCode);
    }
  }
}
</script>

<style scoped lang='scss'>
.login-page {
  position: relative;
  min-height: 100vh;
  background: url(@/assets/login-bg.png) no-repeat center / cover;
  display: flex;
  justify-content: space-around;
  align-items: center;
   .el-card {
    overflow: visible;
     .login-icon {
 position: absolute ;
      width: 96px;
      z-index: 900;
      height: 96px;
      left: 40%;
      top: -50px;
      
    img {
     width: 100%;
   
    }
  }
    position: relative;
  width: 420px;
  margin: 0 auto;
   ::v-deep .el-card__header {
    position: relative;
     background:#fff;
    text-align: center;
    color: white;
    height: 40px;
    font-size: 18px;
   line-height: 40px;
   border-bottom: none ;
   img {
    position: absolute;
    top: -40px;
   }
   }
   .el-form {
    padding: 0 20px;
   }
   .tc {
    text-align: center;
   }
 }
}
.el-form-item__content {
  width: 340px;
  background-color: #6e80f0;
}
.item1 {
  position: relative;
  .icon-shouji{
    position: absolute;
    z-index: 200;
    left: -20px;
    font-size: 20px;
    top: 12px;
   
  }
}
.item2 {
  position: relative;
  .icon-jiesuo{
    position: absolute;
    z-index: 200;
    left: -20px;
    font-size: 20px;
    top: 12px;
   
  }
}
.item3 {
  position: relative;
  .icon-yanzhengyanzhengma{
    position: absolute;
    z-index: 200;
    left: -20px;
    font-size: 20px;
    top: 12px;
   
  }
}
.el-card__header {
  display: none;
  position: relative;
  height: 20px;
  img {
    position: absolute;
    width: 90px;
    left: 150px;
    height: 90px;
  }
}
.tc {
  button {
    width: 340px;
    height: 40px;
    background-color: #6478ed;
    color: white;
    border: none;
  }
}
.zuihou {
    position: relative;
  .zu {
    width: 268px;
  }
  .yan {
    width: 72px;
    height: 38px;
    // background-color: pink;
    // border: 1px solid #80a37b;
    position: absolute;
    top: 0px;
    right: -1px;
    img {
      width: 100%;
      background: cover;
      height: 38px;
    }
  }
}
</style>
